<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="form" :model="listFrom">
        <el-form-item label="合作商搜索：">
          <el-input v-model="listFrom.name" class="elinput1" clearable />
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button
        size="small"
        class="el-btn"
        icon="el-icon-circle-plus-outline"
        @click="adddialog = true"
      >新建</el-button>
      <el-table
        :data="partnerSearch"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="name"
          label="合作商名称"
          width="180"
        />
        <el-table-column
          prop="account"
          label="账号"
          width="180"
        />
        <el-table-column
          prop="vmCount"
          label="设备数量"
          width="180"
        />
        <el-table-column
          prop="baifenbi"
          label="分成比例"
          width="180"
        />
        <el-table-column
          prop="contact"
          label="联系人"
          width="180"
        />
        <el-table-column
          prop="mobile"
          label="联系电话"
          width="180"
        />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-link type="primary" @click="resetLIst(scope.row.id)">重置密码</el-link>
            <el-link type="primary" @click="seeDetails(scope.row)">查看详情</el-link>
            <el-link type="primary" @click="editList(scope.row)">修改</el-link>
            <el-link type="danger" @click="deleList(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增合作商对话框 -->
    <el-dialog
      close="dialog"
      title="新增合作商"
      :visible.sync="adddialog"
      width="40%"
      @close="addclose"
    >
      <el-form ref="addruleForm" :model="addFrom" :rules="addrules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="合作商名称：" prop="name">
          <el-input v-model="addFrom.name" maxlength="10" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系人：" prop="contact">
          <el-input v-model="addFrom.contact" maxlength="10" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话：" prop="mobile">
          <el-input v-model="addFrom.mobile" maxlength="11" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分成比例：" prop="ratio">
          <el-input-number v-model="addFrom.ratio" controls-position="right" :min="0" :max="100" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="addFrom.account" maxlength="18" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addFrom.password" maxlength="20" show-word-limit placeholder="请输入" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialog = false">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看详情对话框 -->
    <el-dialog
      title="合作商详情"
      :visible.sync="seeDetailsdialog"
      width="30%"
    >
      <div class="box">
        <div>合作商名称: {{ seeDetailsFrom.name }}</div>
        <div>联系人: {{ seeDetailsFrom.contact }}</div>
        <div>联系电话：{{ seeDetailsFrom.mobile }}</div>
        <div>分成比例： {{ seeDetailsFrom.ratio }}</div>
      </div>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="editdialog"
      width="30%"
      @close="editClose"
    >
      <el-form ref="seeDetailsruleForm" :model="seeDetailsFrom" :rules="seeDetailsrules" label-width="130px" class="demo-ruleForm">
        <el-form-item label="合作商名称：" prop="name">
          <el-input v-model="seeDetailsFrom.name" />
        </el-form-item>
        <el-form-item label="联系人：" prop="contact">
          <el-input v-model="seeDetailsFrom.contact" />
        </el-form-item>
        <el-form-item label="联系电话：" prop="mobile">
          <el-input v-model="seeDetailsFrom.mobile" />
        </el-form-item>
        <el-form-item label="分成比例(%)：" prop="ratio">
          <el-input-number v-model="seeDetailsFrom.ratio" controls-position="right" :min="0" :max="100" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialog = false">取 消</el-button>
        <el-button type="primary" @click="determineTheModifications">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { partnerSearchAPI, newPartnersAPI, resetThePartnerPasswordAPI, modifyPartnersAPI, deleteAPartnerAPI } from '@/api/point.js'
export default {
  data() {
    return {
      // 合作商搜索数据
      partnerSearch: [],
      // 页码值
      listFrom: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      // 添加表单
      addFrom: {
        account: '',
        contact: '',
        mobile: '',
        name: '',
        password: '',
        ratio: null
      },
      // 详情数据
      seeDetailsFrom: {
        contact: '',
        mobile: '',
        name: '',
        ratio: '',
        account: ''
      },
      ids: null,
      // 添加表单验证规则
      addrules: {
        // /^1[3-9]\d{9}$/
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '请输入正确手机号格式' }
        ],
        name: [
          { required: true, message: '请输入合作商名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        ratio: [
          { required: true, message: '请输入分成比例', trigger: 'blur' }
        ]
      },
      // 修改表单验证规则
      seeDetailsrules: {
        name: [
          { required: true, message: '请输入合作商名称', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '请输入正确手机号格式' }
        ],
        ratio: [
          { required: true, message: '请输入分成比例', trigger: 'blur' }
        ]
      },
      // 新增合作商对话框
      adddialog: false,
      // 查看详情对话框
      seeDetailsdialog: false,
      // 修改对话框
      editdialog: false
    }
  },
  created() {
    // 初始数据
    this.getpartnerSearchAPI()
  },
  methods: {
    // 初始数据接口
    async getpartnerSearchAPI() {
      const res = await partnerSearchAPI(this.listFrom)
      this.partnerSearch = res.currentPageRecords
      this.partnerSearch.forEach(item => {
        item.baifenbi = (item.ratio + '').concat('%')
      })
      // console.log(this.partnerSearch)
    },
    inquire() {
      this.getpartnerSearchAPI()
    },
    // 确定添加合作商
    addList() {
      this.$refs.addruleForm.validate(async(valld) => {
        if (!valld) return
        await newPartnersAPI(this.addFrom)
        this.$message.success('新增成功！')
        this.adddialog = false
        this.getpartnerSearchAPI()
      })
    },
    addclose() {
      this.$refs.addruleForm.resetFields()
    },
    // 重置按钮
    async resetLIst(id) {
      const prve = await this.$confirm('确定要重置合作商密码吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (prve !== 'confirm') return this.$message.info('已取消')

      await resetThePartnerPasswordAPI(id)
      this.$message.success('重置成功！')
      this.getpartnerSearchAPI()
    },
    // 查看详情按钮
    seeDetails(row) {
      this.seeDetailsdialog = true
      this.seeDetailsFrom.contact = row.contact
      this.seeDetailsFrom.mobile = row.mobile
      this.seeDetailsFrom.name = row.name
      this.seeDetailsFrom.ratio = (row.ratio + '').concat('%')
    },
    // 修改按钮
    editList(row) {
      this.seeDetailsFrom.contact = row.contact
      this.seeDetailsFrom.mobile = row.mobile
      this.seeDetailsFrom.name = row.name
      this.seeDetailsFrom.ratio = row.ratio
      this.seeDetailsFrom.account = row.account
      this.ids = row.id
      this.editdialog = true
    },
    // 确定修改
    determineTheModifications() {
      this.$refs.seeDetailsruleForm.validate(async(valid) => {
        if (!valid) return
        await modifyPartnersAPI(this.seeDetailsFrom, this.ids)
        this.$message.success('修改成功！')
        this.getpartnerSearchAPI()
        this.editdialog = false
      })
    },
    // 修改关闭事件
    editClose() {
      this.$refs.seeDetailsruleForm.resetFields()
    },
    // 删除按钮
    async  deleList(id) {
      const prve = await this.$confirm('确定删除该供应商？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (prve !== 'confirm') return this.$message.info('已以取消删除')
      await deleteAPartnerAPI(id)
      this.$message.error('删除成功！')
      this.getpartnerSearchAPI()
    }
  }
}
</script>

<style lang="scss" scoped>
.card{
  margin-bottom: 15px;
  height: 85px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}
.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.el-link {
  margin-right: 10px;
}
.el-input-number{
  width: 100%;
}
.box {
  display: flex;
  // justify-content: space-evenly;
  flex-wrap: wrap;
  div{
    width: 40%;
    margin-top: 20px;
    margin-left: 20px;
  }
}

</style>
